import { Form } from "antd"
import { DatePicker } from "antd"
import { RangePickerProps } from "antd/es/date-picker"
import dayjs, { Dayjs } from "dayjs"
import { FC, useMemo } from "react"

import { SFormItem } from "@/components/common"
import { ShortcutOptionsType } from "@/components/common/timeSelectionShortcuts/types"
import { useLocale } from "@/locales"
import {
	rangeBeginning,
	rangeCurrentMonth,
	rangeLastWeek,
	rangePastNDays,
	rangePastNMonth,
	rangeToday,
	rangeYesterday
} from "@/utils"

const SeprateRange: FC<
	{
		fields: [string, string]
		labelId?: string
		notAllTime?: boolean
		onChange?: (e: [Dayjs | null, Dayjs | null] | null) => void
		shortcuts?: ShortcutOptionsType[]
	} & RangePickerProps
> = ({ fields, labelId, notAllTime, onChange, shortcuts, ...pickerProps }) => {
	const { formatMessage } = useLocale()
	const form = Form.useFormInstance()
	const start = Form.useWatch(fields[0], form)
	const end = Form.useWatch(fields[1], form)

	const defaultshortcuts: ShortcutOptionsType[] =
		pickerProps.mode?.[0] === "month"
			? [
					{
						label: formatMessage({ id: "common.utils.this_month" }),
						value: rangeCurrentMonth()
					},
					{
						label: formatMessage({ id: "common.utils.last_month" }),
						value: rangePastNMonth(1)
					},
					{
						label: formatMessage({ id: "common.utils.month3_recent" }),
						value: rangePastNDays(90)
					}
			  ]
			: [
					{
						label: formatMessage({ id: "common.utils.today" }),
						value: rangeToday()
					},
					{
						label: formatMessage({ id: "common.utils.yesterday" }),
						value: rangeYesterday()
					},
					{
						label: formatMessage({ id: "common.utils.last_week" }),
						value: rangeLastWeek()
					},
					{
						label: formatMessage({ id: "common.utils.last_n_days" }, { n: 7 }),
						value: rangePastNDays(7)
					},
					{
						label: formatMessage({ id: "common.utils.last_n_days" }, { n: 14 }),
						value: rangePastNDays(14)
					},
					{
						label: formatMessage({ id: "common.utils.last_n_days" }, { n: 30 }),
						value: rangePastNDays(30)
					},
					{
						label: formatMessage({ id: "common.utils.last_month" }),
						value: rangePastNMonth(1)
					},
					{
						label: formatMessage({ id: "common.utils.this_month" }),
						value: rangeCurrentMonth()
					},
					{
						label: formatMessage({ id: "common.utils.month3_recent" }),
						value: rangePastNDays(90)
					}
			  ]
	const presets = shortcuts || defaultshortcuts
	if (!notAllTime)
		presets.push({
			label: formatMessage({ id: "common.utils.select_all_range" }),
			value: rangeBeginning()
		})
	const valueRange = useMemo(() => {
		const startValue = start ? dayjs(start) : undefined
		const endValue = end ? dayjs(end) : undefined
		return [startValue, endValue]
	}, [start, end])
	return (
		<>
			<SFormItem label={!labelId ? undefined : formatMessage({ id: labelId })}>
				<DatePicker.RangePicker
					value={valueRange as [Dayjs | undefined | null, Dayjs | undefined | null]}
					showTime={pickerProps.showTime ?? true}
					presets={presets}
					maxDate={dayjs()}
					onChange={rangeValue => {
						if (onChange) onChange(rangeValue)
						if (rangeValue && rangeValue[0] && rangeValue[1]) {
							// setRangeNow(rangeValue)
							form.setFieldValue(
								fields[0],
								rangeValue[0].format(
									pickerProps.mode?.[0] === "month" ? "YYYYMM" : "YYYY-MM-DD" + (pickerProps.showTime ? " HH:mm:ss" : " 00:00:00")
								)
							)
							form.setFieldValue(
								fields[1],
								rangeValue[1].format(
									pickerProps.mode?.[1] === "month" ? "YYYYMM" : "YYYY-MM-DD" + (pickerProps.showTime ? " HH:mm:ss" : " 23:59:59")
								)
							)
						}
					}}
					{...pickerProps}
				/>
			</SFormItem>
			{/* position absolute是为了让布局中忽略这个两个formitem */}
			<Form.Item name={fields[0]} style={{ position: "absolute" }} />
			<Form.Item name={fields[1]} style={{ position: "absolute" }} />
		</>
	)
}

export default SeprateRange
